<template>
  <div class="class-list">
    <h2>我的班级</h2>
    <div v-if="!classList || classList.length === 0" class="debug-info">
      <p>No Data</p>
    </div>
    <div v-else class="debug-info">
      <p>班级数量: {{ classList.length }}</p>
    </div>
    <el-menu
      class="el-menu-vertical-demo"
      :default-active="selectedClassId"
    >
      <el-menu-item
        v-for="classItem in classList"
        :key="classItem.id"
        :index="classItem.id.toString()"
        @click="selectClass(classItem.id)"
      >
        <i class="el-icon-user"></i>
        <span>{{ classItem.className }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "ClassList",
  props: {
    classList: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      selectedClassId: '',
    };
  },
  mounted() {
    console.log("ClassList组件接收到的班级列表:", this.classList);
  },
  methods: {
    selectClass(classId) {
      this.selectedClassId = classId.toString();
      this.$emit("classSelected", classId);
    },
  },
  watch: {
    classList: {
      handler(newValue) {
        console.log("ClassList组件的classList属性变化:", newValue);
      },
      deep: true,
      immediate: true
    }
  }
};
</script>

<style scoped>
.class-list {
  flex: 1;
  background-color: #ffffff; /* 背景 */
  padding: 10px;
  height: 100%;
  overflow-y: auto; /* 支持滚动 */
}

.debug-info {
  background-color: #f5f5f5;
  padding: 5px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #666;
}

.el-menu {
  border: none;
}

.el-menu-item {
  font-size: 16px;
  height: 50px;
  line-height: 50px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  transition: all 0.3s ease;
}

.el-menu-item:hover {
  background-color: #d4e3ef; 
}

.el-menu-item.is-active {
  background-color: #cddbf1; /* 激活状态背景 */
  color: #000000 !important; /* 激活状态文字颜色 */
}

.el-icon-user {
  margin-right: 10px;
}
</style>